<template>
	<view class="detailsPage paper surnameOrigin customTitleBar" :style="{borderTopWidth:statusBarHeight}">
		<view class="custom-status-bar" :style="{backgroundColor: customTitleBarBg,height:statusBarHeight}"></view>
		<view class="custom-nav-bar tabs-bar" :style="{top:statusBarHeight,backgroundColor: customTitleBarBg,}">
			<text class="tabs-item" @click="toHundredFamilySurnames">百家姓</text>
			<text class="tabs-item" @click="toPaper">论文</text>
			<text class="tabs-item" @click="toCase">案例</text>
			<text class="tabs-item selected" @click="toSurnameOrigin">姓氏来源</text>
		</view>
		<view class="search-bar">
			<view class="search-form">
				<input type="text" placeholder="搜索关键字查询" v-model="searchInput" confirm-type="search" @confirm="dofind">
				<view class="btn-clear" @click.stop="clearInput" v-show="searchInput !=''">清除</view>
			</view>
		</view>
		<view class="container-wrap">
			<view class="container">
				<!-- 暂无内容s -->
				<view class="no-data" style="display: none;">
					<image src="/static/img/icon_no_data.jpg" class="icon-no-data"></image>
					<view class="title">暂时没有内容</view>
				</view>
				<!-- 暂无内容e -->
				<view class="header-title"  v-if="bloodList_AB_show"><view class="label">第一种人</view>AB型性状显性来源炎帝时代最早人物：</view>
				<view class="list" >
					<view class="list-item" v-for="(item, index) in bloodList_AB_List" :key="index">
						<view class="surname">{{item.bloodName}}</view>
						<view class="content">
							<view class="title">AB型性状显性<view class="rate"><uni-rate :readonly="true" :value="item.startNum" :size="14" activeColor="#00BD8D" :margin="2" /></view></view>
							<view class="body">{{item.remark==null?'无描述':item.remark}}</view>
						</view>
					</view>
				</view>
				<view class="header-title" v-if="bloodList_B_show"><view class="label">第二种人</view>B型性状显性来源黄帝时代人物：</view>
				<view class="list" >
					<view class="list-item" v-for="(item, index) in bloodList_B_List" :key="index">
						<view class="surname">{{item.bloodName}}</view>
						<view class="content">
							<view class="title">B型性状显性<view class="rate"><uni-rate :readonly="true" :value="item.startNum" :size="14" activeColor="#00BD8D" :margin="2" /></view></view>
							<view class="body">{{item.remark==null?'无描述':item.remark}}</view>
						</view>
					</view>
				</view>
				<view class="header-title" v-if="bloodList_A_show"><view class="label">第三种人</view>A型性状显性来源契或大业时代的人物：</view>
				<view class="list" >
					<view class="list-item" v-for="(item, index) in bloodList_A_List" :key="index">
						<view class="surname">{{item.bloodName}}</view>
						<view class="content">
							<view class="title">A型性状显性<view class="rate"><uni-rate :readonly="true" :value="item.startNum" :size="14" activeColor="#00BD8D" :margin="2" /></view></view>
							<view class="body">{{item.remark==null?'无描述':item.remark}}</view>
						</view>
					</view>
				</view>
				<view class="header-title" v-if="bloodList_O_show>0"><view class="label">第四种人</view>O型性状显性来源4000多年前后稷时代人物：</view>
				<view class="list" >
					<view class="list-item" v-for="(item, index) in bloodList_O_List" :key="index">
						<view class="surname">{{item.bloodName}}</view>
						<view class="content">
							<view class="title">O型性状显性<view class="rate"><uni-rate :readonly="true" :value="item.startNum" :size="14" activeColor="#00BD8D" :margin="2" /></view></view>
							<view class="body">{{item.remark==null?'无描述':item.remark}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航s -->
		<view class="menu-bar">
			<view class="menu-bar-item" @click="toHome"><view class="icon icon-home"></view><text>首页</text></view>
			<view class="menu-bar-item" @click="toPersonalCenter"><view class="icon icon-me"></view><text>我的</text></view>
		</view>
		<!-- 底部导航s -->
		<u-modal :show="showLaiyuan" :title="nametitle" :content='namecontent' @confirm="doChecked" :confirmText="nameFirmText"></u-modal>
	</view>
</template>

<script>
	import { getBloddInfoListTwo} from '@/common/api.js';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				nameFirmText:"",
				namecontent:"",
				nametitle:"",
				showLaiyuan:false,
				customTitleBarBg: 'rgba(250,250,250,1)',
				statusBarHeight: statusBarHeight,
				searchInput: '',
				bloodList_AB_show:false,
				bloodList_AB_List:[],
				bloodList_AB:[],
				bloodList_A_List:[],
				bloodList_A_show:false,
				bloodList_A:[],
				bloodList_B_List:[],
				bloodList_B_show:false,
				bloodList_B:[],
				bloodList_O_List:[],
				bloodList_O_show:false,
				bloodList_O:[],
			}
		},onShow() {
				this.getBloddInfoList();
			},
		methods: {
			doChecked(){
				this.showLaiyuan=false;
			},
			dofind(){
				let that=this;
				let item=null;
				let nametitle="";
				let f=false;
				for(let i=0;i<this.bloodList_AB_List.length;i++){
					 item=this.bloodList_AB_List[i]
					 console.log(item.bloodName+"===");
					if(item.bloodName==this.searchInput){
						nametitle="AB型性状显性";
						f=true;
						break;
					}
				}
				if(f==false){
				for(let i=0;i<this.bloodList_AB.length;i++){
					 item=this.bloodList_AB[i]
					 console.log(item.bloodName);
					if(item.bloodName==this.searchInput){
						nametitle="AB型性状显性";
						f=true;
						break;
					}
				}}
				if(f==false){
					for(let i=0;i<this.bloodList_A_List.length;i++){
						 item=this.bloodList_A_List.length[i]
						if(item.bloodName==this.searchInput){
							nametitle="A型性状显性";
							f=true;
							break;
						}
					}
				}
				if(f==false){
					for(let i=0;i<this.bloodList_A.length;i++){
						 item=this.bloodList_A[i]
						if(item.bloodName==this.searchInput){
							nametitle="A型性状显性";
							f=true;
							break;
						}
					}
				}
				if(f==false){
					for(let i=0;i<this.bloodList_B_List.length;i++){
						 item=this.bloodList_B_List[i]
						if(item.bloodName==this.searchInput){
							nametitle="B型性状显性";
							f=true;
							break;
						}
					}
				}
				
				if(f==false){
				for(let i=0;i<this.bloodList_B.length;i++){
					 item=this.bloodList_B[i]
					if(item.bloodName==this.searchInput){
						nametitle="B型性状显性";
						f=true;
						break;
					}
					
				}
				}
				
				if(f==false){
				for(let i=0;i<this.bloodList_O_List.length;i++){
					 item=this.bloodList_O_List.length[i]
					if(item.bloodName==this.searchInput){
						nametitle="O型性状显性";
						f=true;
						break;
					}
					
				}
				}
				
				if(f==false){
				for(let i=0;i<this.bloodList_O.length;i++){
					 item=this.bloodList_O[i]
					if(item.bloodName==this.searchInput){
						nametitle="O型性状显性";
						f=true;
						break;
					}
					
				}
				}
				console.log(item);
			if(item!=null){
				this.nameFirmText=item.bloodName;
				this.nametitle=nametitle;
				this.namecontent=item.remark;
				this.showLaiyuan=true;
			}else{
				
			}
				
			},
			getBloddInfoList(){
				// get请求
				getBloddInfoListTwo().then(data => {
					this.bloodList_AB=data.AB;
					if(this.bloodList_AB.length>0){
						this.bloodList_AB_show=true;
					}
						
					if(this.bloodList_AB.length<=10){
						this.bloodList_AB_List=this.bloodList_AB;
						this.bloodList_AB=[];
					}else{
						this.bloodList_AB_List=this.bloodList_AB.slice(0,10);
						this.bloodList_AB=this.bloodList_AB.slice(10,this.bloodList_AB.length);
					}
					this.bloodList_A=data.A;	
				    this.bloodList_B=data.B;	
					this.bloodList_O=data.O;	
				}).catch(() =>{
					
				})
			
			},
			clearInput() {
				this.searchInput = '';
			},
			toHundredFamilySurnames() {
				uni.redirectTo({
					url: '../hundredFamilySurnames/hundredFamilySurnames',
				});
			},
			toCase() {
				uni.redirectTo({
					url: '../case/case',
				});
			},
			toPaper() {
				uni.redirectTo({
					url: '../paper/paper',
				});
			},
			toSurnameOrigin() {
				uni.redirectTo({
					url: '../surnameOrigin/surnameOrigin',
				});
			},
			toHome() {
				uni.redirectTo({
					url: '../index/index',
				});
			},
			toPersonalCenter() {
				uni.redirectTo({
					url: '../personalCenter/personalCenter',
				});
			},
			onReachBottom() {
				console.log(this.bloodList_A.length)
				if(this.bloodList_AB.length>=10){
						console.log(this.bloodList_AB.slice(0,10))
					this.bloodList_AB_List=this.bloodList_AB_List.concat(this.bloodList_AB.slice(0,10));
					this.bloodList_AB=this.bloodList_AB.slice(10,this.bloodList_AB.length);
				}else if(this.bloodList_AB.length>0&&this.bloodList_AB.length<10){
					this.bloodList_AB_List=this.bloodList_AB_List.concat(this.bloodList_AB);
					this.bloodList_AB=[];
				}else{//
					if(this.bloodList_B.length>0){
						this.bloodList_B_show=true;
						if(this.bloodList_B.length>=10){
								console.log("===1B")
								console.log(this.bloodList_B.slice(0,10))
							this.bloodList_B_List=this.bloodList_B_List.concat(this.bloodList_B.slice(0,10));
							this.bloodList_B=this.bloodList_B.slice(10,this.bloodList_B.length);
						}else if(this.bloodList_B.length>0&&this.bloodList_B.length<10){
								console.log("===2B")
							this.bloodList_B_List=this.bloodList_B_List.concat(this.bloodList_B);
							this.bloodList_B=[];
						}
					}else{
						if(this.bloodList_A.length>0){
							this.bloodList_A_show=true;
							if(this.bloodList_A.length>=10){
									console.log("===1")
									console.log(this.bloodList_A.slice(0,10))
								this.bloodList_A_List=this.bloodList_A_List.concat(this.bloodList_A.slice(0,10));
								this.bloodList_A=this.bloodList_A.slice(10,this.bloodList_A.length);
							}else if(this.bloodList_A.length>0&&this.bloodList_A.length<10){
									console.log("===2")
								this.bloodList_A_List=this.bloodList_A_List.concat(this.bloodList_A);
								this.bloodList_A=[];
							}
						}else{
							this.bloodList_O_show=true;
							if(this.bloodList_O.length>=10){
									console.log("===1")
									console.log(this.bloodList_O.slice(0,10))
								this.bloodList_O_List=this.bloodList_O_List.concat(this.bloodList_O.slice(0,10));
								this.bloodList_O=this.bloodList_O.slice(10,this.bloodList_O.length);
							}else if(this.bloodList_O.length>0&&this.bloodList_O.length<10){
									console.log("===2")
								this.bloodList_O_List=this.bloodList_O_List.concat(this.bloodList_O);
								this.bloodList_O=[];
							}
						}
					}
				}
						console.log("===")
					}
		}
	}
</script>

<style>
	page{background-color: #fff;}
</style>